.pins {
  user-select: none;
  margin-top: $space-s;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  flex-wrap: wrap;
  flex-basis: 100%;

  .filter-node {
    margin-right: 12px;
    min-height: 17px;
  }

  .pin-button-wrapper {
    border-radius: 3px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3px;

    span {
      cursor: pointer;
      border: 1px solid #dcdcdc;
      border-right: none;
      border-radius: 3px 0 0 3px;
      padding: 3px 12px;
      font-family: $mono-font;
      font-size: 9px;
      line-height: 9px;
      transition: all 150ms;

      &:hover {
        background: white;
      }
    }
  }

  .pin-button {
    @include button-reset;
    background-color: #dcdcdc;
    &:hover {
      background: darken(#dcdcdc, 5%);
    }

    &:active,
    .active {
      background: darken(#dcdcdc, 10%);
    }
    min-height: 17px;
    border-radius: 0px 3px 3px 0px;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    align-self: flex-start;

    svg {
      transform: rotate(45deg);
      fill: $gray-9;
      stroke: $gray-9;
      width: 12px;
      height: 12px;
      margin: 0 6px;
    }
  }
}
